<template>
    <div class="full-percent">
        <div style="display: flex" v-if="webInfo.length > 1">
            <div v-for="(item, index) in webInfo" :class="`data-index ${currentIndex === index ? 'select' : ''}`"
                :style="`width:${100 / webInfo.length}%`" @click="currentIndex = index" :key="index">
                {{ 'Webapp-' + item.ContextPath }}
            </div>
        </div>
        <el-scrollbar :style="`height:${webInfo.length > 1 ? 'calc(100% - 155px)' : '100%'};`">
            <el-descriptions :column="1" border>
                <el-descriptions-item :label="map[key] || key" :labelClassName="`label ${key}`"
                    v-for="key in Object.keys(currentDataSource)" :key="key">
                    {{ currentDataSource[key] }}
                </el-descriptions-item>
            </el-descriptions>
        </el-scrollbar>
    </div>
</template>
<script setup>
import { useRequest } from "@usehook"

const map = {
    RunningCount: "执行中",
    ConcurrentMax: "最大并发",
    RequestCount: "请求次数",
    JdbcCommitCount: "事务提交数",
    JdbcRollbackCount: "事务回滚数",
    JdbcExecuteCount: "Jdbc执行数",
    JdbcExecuteTimeMillis: "Jdbc时间",
    JdbcFetchRowCount: "读取行数",
    JdbcUpdateCount: "更新行数"
}

let webInfo = $ref([])
let currentIndex = $ref(0)

const currentDataSource = $computed(() => {
    const _webInfo = webInfo.length > 0 ? webInfo[currentIndex] : {}
    const { Name, Identity, ...ds } = _webInfo
    return ds
})

onMounted(() => {
    useRequest({ url: "/dataSource/druid/webapp.json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            webInfo = resp.Content
        }
    })
})
</script>

<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(.el-descriptions-row th) {
    text-align: right !important;
}

:deep(.data-index) {
    text-align: center;
    border: 1px solid #99a9bf;
    margin: 0 10px 10px 5px;
    border-radius: 5px;
    padding: 3px 0;
    cursor: default;
    transition: background .2s ease-out;
    font-size: 14px;
}

:deep(.select) {
    background: #99a9bf;
    transition: background .5s ease-out;
}

:deep(.description) {
    background: #fafafa;
    width: 20%;
}

:deep(.el-drawer__body) {
    padding: 0 5px;
}
</style>